<nz-card [nzBodyStyle]="{ padding: '10px 24px' }" [nzBordered]="false">
  <div class="left-start-center">
    <nz-breadcrumb>
      <nz-breadcrumb-item>首页</nz-breadcrumb-item>
      <nz-breadcrumb-item>Dashboard</nz-breadcrumb-item>
      <nz-breadcrumb-item>监控页</nz-breadcrumb-item>
    </nz-breadcrumb>
  </div>
</nz-card>
<section class="content-wrap">
  <section nz-row [nzGutter]="[16, 16]">
    <div nz-col [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXl]="18" [nzXs]="24" [nzXXl]="18">
      <nz-card nzTitle="活动实时交易情况">
        <div nz-row [nzGutter]="[40, 16]">
          <div nz-col [nzLg]="12" [nzMd]="12" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
            <nz-row [nzGutter]="16">
              <nz-col [nzLg]="12" [nzMd]="24" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
                <nz-statistic [nzTitle]="'今日交易总额'" [nzValue]="(124543233 | number)! + '元'"></nz-statistic>
              </nz-col>
              <nz-col [nzLg]="12" [nzMd]="24" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
                <nz-statistic [nzTitle]="'销售目标完成率'" [nzValue]="(0.92 | percent)!"></nz-statistic>
              </nz-col>
            </nz-row>
          </div>
          <div nz-col [nzLg]="12" [nzMd]="12" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
            <nz-row [nzGutter]="16">
              <nz-col [nzLg]="12" [nzMd]="24" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
                <nz-countdown [nzFormat]="'HH:mm:ss:SSS'" [nzTitle]="'活动剩余时间'" [nzValue]="deadline"></nz-countdown>
              </nz-col>
              <nz-col [nzLg]="12" [nzMd]="24" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
                <nz-statistic [nzTitle]="'每秒交易总额'" [nzValue]="(234 | number)! + '元'"></nz-statistic>
              </nz-col>
            </nz-row>
          </div>
          <div nz-col nzSpan="24" style="min-height: 430px">
            <div id="map"></div>
          </div>
        </div>
      </nz-card>
    </div>
    <div nz-col [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXl]="6" [nzXs]="24" [nzXXl]="6">
      <div class="card-wrap-line">
        <nz-card nzTitle="活动情况预测">
          <div class="card-top">
            <div nz-typography nzType="secondary">目标评估</div>
            <div class="title">有望达到预期</div>
          </div>
          <div>
            <div id="miniArea"></div>
          </div>
        </nz-card>

        <nz-card class="m-t-15" nzTitle="券核效率">
          <div id="dashBoard"></div>
        </nz-card>
      </div>
    </div>

    <div nz-col [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
      <nz-card nzTitle="各品类占比">
        <div nz-row>
          <div id="ringProgress1" class="pipe-height center" nz-col [nzLg]="8" [nzMd]="8" [nzSm]="8" [nzXl]="8" [nzXs]="8" [nzXXl]="8"></div>
          <div id="ringProgress2" class="pipe-height center" nz-col [nzLg]="8" [nzMd]="8" [nzSm]="8" [nzXl]="8" [nzXs]="8" [nzXXl]="8"></div>
          <div id="ringProgress3" class="pipe-height center" nz-col [nzLg]="8" [nzMd]="8" [nzSm]="8" [nzXl]="8" [nzXs]="8" [nzXXl]="8"></div>
        </div>
      </nz-card>
    </div>
    <div nz-col [nzLg]="12" [nzMd]="24" [nzSm]="24" [nzXl]="6" [nzXs]="24" [nzXXl]="6">
      <nz-card nzTitle="热门搜索">
        <div id="wordCloud" class="pipe-height"></div>
      </nz-card>
    </div>
    <div nz-col [nzLg]="12" [nzMd]="24" [nzSm]="24" [nzXl]="6" [nzXs]="24" [nzXXl]="6">
      <nz-card nzTitle="资源剩余">
        <div id="liquidPlot" class="pipe-height"></div>
      </nz-card>
    </div>
  </section>
</section>
